<template>
    <card
        :title="$st('wp-yuan-cheng-ma')"
        :titleBolder="true">
        <line-cell
            :listSetProps="listprops"
            :listData="DeviceStatus === 'Offline' ? {} : remotedata">
        </line-cell>
    </card>
</template>
<script>
import { reactive, toRefs, onActivated, onDeactivated } from 'vue';
import card from '@/components/_common/card.vue';
import LineCell from '@/components/_common/LineCell.vue';
import { deviceviewSetup } from '@/setup/deviceview/deviceviewSetup.js';
import { selfI18n } from '@/i18n/index';
import { MqttThemes } from '@/mqtt.config';

export default {
    components: {
        card,
        LineCell
    },
    props: {
        uuid: String
    },
    setup (props, ctx) {
        const { getRemoteData } = deviceviewSetup();
        const $st = selfI18n;

        const state = reactive({
            listprops: [{
                id: 'discode',
                label: $st('wp-shi-bie-ma')
            }, {
                id: 'vercode',
                label: $st('wp-yan-zheng-ma')
            }],
            remotedata: {},
            interval: null
        });

        // 获取远程码
        const getRemoteCode = () => {
            getRemoteData({
                uuid: props.uuid
            }).then((data) => {
                const {
                    identifycode,
                    verifycode
                } = data.value;
                state.remotedata.vercode = verifycode;
                state.remotedata.discode = identifycode;
            });
        };

        onActivated(() => {
            getRemoteCode();
            state.interval = setInterval(() => {
                getRemoteCode();
            }, 15000);
        });

        onDeactivated(() => {
            state.interval && clearInterval(state.interval);
        });

        return {
            ...toRefs(state),
            getRemoteData
        };
    },

    dynamicMqtt () {
        return {
            [MqttThemes.device_status({ Uuid: this.uuid })] (message) {
                // console.log(message);
                if (message) {
                    this.DeviceStatus = message.value;
                }
            }
        };
    },

    data () {
        return {
            DeviceStatus: 'Offline'
        };
    }
};
</script>
